<template>
  <base-view :model="query" @submit="search" class="custom">
    <template v-slot:params>
      <a-col :span="8">
        <a-form-model-item label="商户等级代码">
          <a-input placeholder="输入商户等级代码" v-model="query.mchntLevelCode" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="商户等级名称">
          <a-input v-model="query.mchntLevelName" placeholder="输入商户等级名称" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item class="search">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
        </a-form-model-item>
      </a-col>
    </template>
    <div class="section">
      <div class="btn-group">
        <a-button type="primary" @click="openModal()" v-has-permission="['mchntLevel:add']">
          <a-icon type="plus" />
          <span>增加</span>
        </a-button>
      </div>
      <a-table ref="table" :columns="columns" :dataSource="dataSource" :rowKey="
        (record, index) => {
          return index;
        }
      " @change="pageChange" @showSizeChange="pageChange" :loading="loading" :pagination="pagination"
        :scroll="{ x: 1500 }">
        <template slot="operation" slot-scope="text, record">
          <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)"
            v-if="record.mchntLevelStatus !== '02' && record.mchntLevelStatus !== '03'" title="修改"
            v-has-permission="['mchntLevel:update']"></a-icon>
          <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情"
            v-has-permission="['mchntLevel:view']"></a-icon>
          <a-icon type="delete" theme="twoTone" twoToneColor="#4a9ff5" title="注销"
            v-if="record.mchntLevelStatus !== '03'" @click="cancel(record)" v-has-permission="['mchntLevel:delete']">
          </a-icon>
          <a-badge status="warning" text="无权限" v-has-no-permission="[
            'mchntLevel:view',
            'mchntLevel:update',
            'mchntLevel:delete',
          ]"></a-badge>
        </template>
      </a-table>
    </div>
    <a-modal v-model="modalVisible" :title="modalTitle" width="1050px" @ok="submit" :maskClosable="false"
      :footer="isHideFoot ? null : undefined">
      <mchnt-level-operation ref="modalForm" />
    </a-modal>
  </base-view>
</template>

<script>
import MchntLevelOperation from "./MchntLevelOperation";

export default {
  name: "MchntLevel",
  components: { MchntLevelOperation },
  data() {
    return {
      beanInfo: {},
      modalVisible: false,
      isHideFoot: false,
      modalTitle: "",
      operationType: "add",
      query: { instId: "", mchntLevelCode: "", mchntLevelName: "" },
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "商户等级代码",
          dataIndex: "mchntLevelCode",
          width: 200,
        },
        {
          title: "商户等级名称",
          dataIndex: "mchntLevelName",
          width: 200,
        },
        {
          title: "商户等级描述",
          dataIndex: "mchntLevelDesc",
          width: 200,
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          width: 200,
        },
        {
          title: "法人行",
          dataIndex: "instId",
          width: 200,
        },
        {
          title: "审批状态",
          dataIndex: "auditStatus",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "待提交审批";
              case "01":
                return "新增-审批流程中";
              case "02":
                return "新增-审批通过";
              case "03":
                return "新增-审批拒绝";
              case "41":
                return "修改-审批流程中";
              case "42":
                return "修改-审批通过";
              case "43":
                return "修改-审批拒绝";

              case "21":
                return "停用-审批流程中";
              case "22":
                return "停用-审批通过";
              case "23":
                return "停用-审批拒绝";

              case "31":
                return "启用-审批流程中";
              case "32":
                return "启用-审批通过";
              case "33":
                return "启用-审批拒绝";

              case "11":
                return "注销-审批流程中";
              case "12":
                return "注销-审批通过";
              case "13":
                return "注销-审批拒绝";
            }
          },
        },
        {
          title: "商户等级状态",
          dataIndex: "mchntLevelStatus",
          width: 200,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "非正式";
              case "01":
                return "正式";
              case "02":
                return " 停用";
              case "03":
                return "已注销";
            }
          },
        },
        {
          title: "操作",
          scopedSlots: { customRender: "operation" },
          fixed: "right",
          width: 120,
        },
      ],
      dataSource: [],
    };
  },

  methods: {
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.defaultCurrent = 1;
        await this.search();
      }
    },

    async reset() {
      this.query = { instId: this.query.instId }
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      try {
        const res = await this.$get("/admin/mcmp/bMchntLevelInfo/list", {
          instId: this.query.instId,
          mchntLevelCode: this.query.mchntLevelCode,
          mchntLevelName: this.query.mchntLevelName,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    openModal(type = "add", beanInfo) {
      if ((type !== "add" && type !== "view") && (beanInfo.auditStatus === '01' || beanInfo.auditStatus === '11' || beanInfo.auditStatus === '21' || beanInfo.auditStatus === '31' || beanInfo.auditStatus === '41')) {
        const h = this.$createElement;
        this.$warning({
          title: '提示',
          content: h('div', {}, [
            h('p', '审批流程中的数据不允许修改'),
          ]),
          onOk() { },
        });
        return
      }

      this.modalTitle = {
        add: "新增",
        edit: "编辑",
        view: "详情",
        cancel: "注销",
      }[type];
      this.modalVisible = true;
      if (type === 'view') {
        this.isHideFoot = true;
      } else {
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        if (type === "edit" || type === "view" || type === "cancel") {
          this.$refs.modalForm.setBeanInfo(beanInfo);
        }
        this.$refs.modalForm.resetFields(this.query.instId);
      });
    },
    async edit(item) {
      this.openModal("edit", item);
    },
    view(item) {
      this.openModal("view", item);
    },
    cancel(item) {
      this.openModal("cancel", item);
    },

    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
      this.search();
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";
</style>
